<template>
  <!-- 分类页面 -->
  <div>
    <!-- 头部搜索栏 -->
    <header>
      <i class="iconfont iconfont-fanhui"></i>
      <div class="serch">
        <i class="iconfont icon-fangdajing"></i>
        <input type="text" placeholder="家电返厂同价" />
      </div>
      <i class="iconfont iconfont-gengduo1"></i>
    </header>

    <!-- 手机内容 -->
    <div class="content">
      <!-- left-list -->
      <!-- ref属性是用来标志元素的，可以通过$refs来快捷获取 -->
      <div class="left-list" ref="leftEle">
        <ul>
          <!-- 多个按钮，用一个数据来判断，加载样式 -->
          <li
            :class="listIndex == index ? 'cur' : ''"
            v-for="(item, index) in list"
            @click="listCur(index)"
            :key="index"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="right-content" ref="rightEle">
        <img :src="oneList.mainImgUrl" alt="" class="title" />
        <!-- 手机通讯  -->
        <div class="tongxun" v-for="(item, index) in oneList.list" :key="index">
          <h3>{{ item.title }}</h3>
          <ul>
            <li v-for="(item1, index1) in item.productList" :key="index1">
              <img :src="item1.imgUrl" alt="" />
              <p>{{ item1.title }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 底部固定标签栏 -->
    <tabBar></tabBar>
  </div>
</template>

<script>
import tabBar from "@/components/tabBar.vue";
import { getCategoryData } from "../../api";
import BScorll from "@better-scroll/core";
import '@better-scroll/pull-up'
// import BScroll from 'vue-bscroll'
export default {
  components: {
    tabBar,
  },
  data() {
    return {
      // 数据列表
      list: [],
      // 用于点击显示数据
      listIndex: 0,
      // 单个页面数据
      oneList: {},
    };
  },
  methods: {
    listCur(index) {
      this.listIndex = index;
      // 同时也改变数据
      this.oneList = this.list[index];
    },

    setDomHeight() {
      // 获取设备屏幕的宽高
      
      // console.log(window.screen.height);
      // 头部栏标签的宽度
      const headEled = document.querySelector('.left-list').clientHeight
      // 计算内容的宽度
      const contentE = window.screen.height - headEled -90
      // 固定列表高度
      this.$refs.leftEle.style.height = contentE + 'px'
      // 固定右侧内容的高度
      this.$refs.rightEle.style.height = contentE + 'px'
      

    }
  },
  created() {
    // 获取分类数据
    getCategoryData((res) => {
      this.list = res.data.data;
      this.oneList = res.data.data[0];
    });
  },
  mounted() {
    // this.setDomHeight()
    this.$nextTick(function () {
      this.setDomHeight()

      let wrapper = document.querySelector(".left-list")
      new BScorll(wrapper, {
        click: true,
        bounce: true,
        bounceTime: 1000,
        probetype: 2,
        pullUpLoad: true
      })
      new BScorll(this.$refs.rightEle, {
        click: true,
        bounce: true,
        bounceTime: 1000,
        probetype: 2,
        pullUpLoad: true
      })
      
    })
  }
};
</script>

<style lang="scss" scoped>
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 23px;
  font-size: 20px;
  border-bottom: 1px solid #888;
  background-color: #fff;
  .iconfont {
    font-size: 34px;
  }
  .serch {
    display: flex;
    align-items: center;
    width: 70%;
    height: 50px;
    border-radius: 25px;
    background-color: #f7f7f7;
    padding: 0 20px;
    // .icon-fangdajing {

    // }
    input {
      border: 0;
      background-color: #f7f7f7;
      margin-left: 10px;
    }
  }
}


.content {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  margin-top: 100px;
  .left-list {
    // float: left;
    // width: 200px;
    width: 30%;
    background-color: #bbb;
    overflow: scroll;
    .cur {
      color: #f00;
      background-color: #fff;
    }
    li {
      height: 75px;
      line-height: 75px;
      text-align: center;
      font-size: 22px;
    }
  }
  .right-content {
    // float: left;
    // flex: 1;
    // width: 550px;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    // background-color: #f00;
    overflow: scroll;
    .title {
      // width: 520px;
      width: 100%;
    }
    h3 {
      font-size: 28px;
    }
    ul > li {
      float: left;
      width: 33%;
      img {
        // width: 170px;
        width: 80%;
      }
      p {
        font-size: 22px;
        text-align: center;
        margin-top: 0;
      }
    }
  }
}
</style>